<template>
	<view class="min-h-[100vh] bg-background flex flex-col justify-center items-center">
		<view class="">
			<lime-painter ref="painter">
				<l-painter-view css="background: #fff; height: 808rpx;border-radius:16rpx;">
					<l-painter-view css="height:510rpx;width:510rpx;margin:0 auto;margin-top:32rpx;">
						<l-painter-image :src="$setBaseUrl(shareBg)" css="height: 100%; width: 100%;"></l-painter-image>
					</l-painter-view>
					<l-painter-view css="background: #fff;height: 128rpx; width: 128rpx;border-radius:64rpx;position:absolute;top:496rpx;left:40rpx;">
						<l-painter-view css="background: #fff;margin:12rpx;height: 104rpx; width: 104rpx;border-radius:52rpx;">
							<l-painter-image :src="$setBaseUrl(store.userInfo.avatar)" css="height: 100%; width: 100%;object-fit:contain;border-radius:52rpx;"></l-painter-image>
						</l-painter-view>
					</l-painter-view>
					<l-painter-text css="position:absolute;top:558rpx;left:184rpx;font-size: 30rpx;font-weight:700;" :text="store.userInfo.nickName"></l-painter-text>
					<l-painter-view css="width:510rpx;height:2rpx;border-bottom:2rpx dashed #DDD;position:absolute;top:656rpx;left:32rpx;"></l-painter-view>
					<l-painter-view css="width:320rpx;height:86rpx;position:absolute;bottom:36rpx;left:32rpx;">
						<!-- <l-painter-image :src="banner" css="height: 100%; width: 100%;"></l-painter-image> -->
						<l-painter-text css="font-size: 32rpx;font-weight:700;" text="邀您进入小程序"></l-painter-text>
						<l-painter-text css="font-size: 22rpx;font-weight:400;margin-top:10rpx" text="呼朋唤友，购物乐翻天！"></l-painter-text>
					</l-painter-view>
					<l-painter-view css="width:96rpx;height:96rpx;position:absolute;bottom:36rpx;right:32rpx;">
						<l-painter-image :src="qrcode" css="height: 100%; width: 100%;"></l-painter-image>
					</l-painter-view>
				</l-painter-view>
			</lime-painter>
			<view class="w-[560rpx] h-[80rpx] bg-white rounded-full leading-[80rpx] text-[28rpx] text-center mt-[48rpx]" @click="generatePicture">保存图片</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import limePainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue';
import { onLoad } from '@dcloudio/uni-app';
import { getDistributionQR } from '@/config/api/distribution';
import useUserInfo from '@/hooks/useUserInfo';
import { useLoginStore } from '@/store/login';
import utils from '@/utils/utils';
import { getShareImg } from '../../config/api/banner';
onLoad(async () => {
	await getUserInfoFn();
	await getQRcode();
	await getShareBg();
});
const { getUserInfoFn } = useUserInfo();
const store = useLoginStore();
const qrcode = ref('');
const painter = ref(null);
const shareBg = ref('');
const generatePicture = () => {
	painter.value.canvasToTempFilePathSync({
		fileType: 'jpg',
		// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
		pathType: 'url',
		quality: 1,
		success: (res) => {
			// H5 提示用户长按图另存
			// #ifdef H5
			utils.showToast('长按图另存为');
			// #endif
			// #ifndef H5
			uni.saveImageToPhotosAlbum({
				filePath: res.tempFilePath,
				success: (res) => {
					utils.showToast('保存成功');
				},
				fail: () => {
					utils.showToast('保存失败');
				}
			});
			// #endif
		}
	});
};
const getQRcode = async () => {
	try {
		const res = await getDistributionQR();
		if (res.code == 200) {
			//base64
			qrcode.value = 'data:image/png;base64,' + res.data;
			console.log(qrcode.value);
		}
	} catch (error) {
		//TODO handle the exception
	}
};
const getShareBg = async () => {
	try {
		const res = await getShareImg();
		if (res.code == 200) {
			shareBg.value = res.data.pic;
		}
	} catch (error) {
		//TODO handle the exception
	}
};
</script>

<style lang="scss" scoped></style>
